<template>
  <div class="mainua">
    <el-form
      class="demo-form-inline"
      :model="form"
      label-width="110px"
      ref="form"
    >
      <div class="main_spac1" style="padding-bottom: 5px">
        <div class="main_white padding10">
          <div class="main_crumbs boxdq">
            <div class="main_crumbs_l">
              <a href="javascript:;" @click="$router.back(-1)">
                <i class="el-icon-arrow-down"></i>返回
              </a>
              <em>|</em>
              <span>限时特卖</span>
            </div>
          </div>
          <div v-loading="loading" element-loading-text="加载中...">
            <!-- 主要部分 -->
            <div class="marginTop20 marginLeft25">
              <el-form-item label="活动名称：" prop="name">
                <el-input
                  class="wid240"
                  v-model="form.name"
                  placeholder="活动名称"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="活动时间：" prop="time">
                <el-date-picker
                  v-model="form.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                  disabled
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="用户分组：" prop="group_ids">
                <el-select
                  class="wid240"
                  v-model="form.group_ids"
                  placeholder="用户分组"
                  multiple
                  @change="changeGroup"
                  disabled
                >
                  <el-option label="全部" value="-1"></el-option>
                  <el-option
                    v-for="(item, index) in group"
                    :label="item"
                    :value="index"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" prop="is_impact">
                <div slot="label">
                  周期报价
                  <el-tooltip
                    class="item marginRight5 mainor_tei"
                    effect="dark"
                    placement="top"
                  >
                    <div slot="content">
                      注释：使用周期报价的用户，商品的价格默认不受活动影响
                    </div>
                    <i class="el-icon-question"></i> </el-tooltip
                  >：
                </div>
                <el-radio-group v-model="form.is_impact" disabled>
                  <el-radio :label="0">不影响</el-radio>
                  <el-radio :label="1">影响</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="" prop="is_limit">
                <div slot="label">
                  限购规则
                  <el-tooltip
                    class="item marginRight5 mainor_tei"
                    effect="dark"
                    placement="top"
                  >
                    <div slot="content">
                      注释：活动时间内，是否限制用户购买数量
                    </div>
                    <i class="el-icon-question"></i> </el-tooltip
                  >：
                </div>
                <el-radio-group v-model="form.is_limit" disabled>
                  <el-radio :label="0">不限购</el-radio>
                  <el-radio :label="1">限购</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="" prop="type" v-if="form.is_limit == 1">
                <div slot="label">
                  限购类型
                  <el-tooltip
                    class="item marginRight5 mainor_tei"
                    effect="dark"
                    placement="top"
                  >
                    <div slot="content">
                      注释：严格类型即达到限购数量后不可再下单，<br />宽松类型即达到限购数量后仍然可以下单，<br />只是后续数量不享受活动价格
                    </div>
                    <i class="el-icon-question"></i> </el-tooltip
                  >：
                </div>
                <el-radio-group v-model="form.type" disabled>
                  <el-radio :label="1">严格</el-radio>
                  <el-radio :label="2">宽松</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>

            <div class="goods_container marginLeft20 marginRight20">
              <div class="goods_container_body main_taf main_table">
                <el-table
                  ref="multipleTable"
                  :data="form.list"
                  element-loading-text="加载中"
                  fit
                  border
                  highlight-current-row
                >
                  <el-table-column label="序号" width="80">
                    <template slot-scope="scope">{{
                      scope.$index + 1
                    }}</template>
                  </el-table-column>
                  <el-table-column
                    label="商品名称"
                    prop="goods_name"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="单位"
                    prop="unit"
                    :show-overflow-tooltip="true"
                  >
                  </el-table-column>
                  <el-table-column
                    label="最近一次采购价"
                    prop="purchase_price"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column
                    label="市场价"
                    prop="market_price"
                    :show-overflow-tooltip="true"
                  />
                  <el-table-column label="活动价格" prop="price">
                    <template slot-scope="scope">
                      {{ scope.row.price }}
                    </template>
                  </el-table-column>
                  <el-table-column label="用户限购" prop="num_limit">
                    <template slot-scope="scope">
                      {{ scope.row.num_limit }}
                    </template></el-table-column
                  >
                  <el-table-column label="起订量" prop="minimum">
                    <template slot-scope="scope">
                      {{ scope.row.minimum }}
                    </template>
                  </el-table-column>
                  <el-table-column label="活动库存" prop="inventory">
                    <template slot-scope="scope">
                      {{ scope.row.inventory }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import rules from "@/rules/marketing/marketing_timelimit.js";
import { get_full_getGoodsSpu } from "@/api/marketing/marketing.js";
import {
  get_panic_base,
  get_panic_info,
} from "@/api/marketing/marketing_timelimit.js";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { parseTime } from "@/utils/index";

export default {
  name: "",
  data() {
    return {
      parseTime,
      rules,
      id: "",
      form: {
        name: "",
        type: 1, //  1  严格模式  2宽松模式
        group_ids: "", //分组id
        time: [],
        start_time: "",
        end_time: "",
        is_impact: 0, // 0  不影响周期报价  1  影响
        is_limit: 0, //0 不限购  1 限购
        num: "", //限购数量
        list: [],
      },
      list: [],
      // 监听滚动
      searchBarFixed: false,
      goods_name: "",
      num: "",
      formsp: {
        goods: "",
        num: "",
        value: "",
        girard: "",
      },
      group: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      loading: false,
    };
  },
  methods: {
    // 获取用户分组
    get_panic_base() {
      this.loading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      return new Promise((resolve, reject) => {
        get_panic_base(data)
          .then((res) => {
            resolve(res);
            if (res.errcode == 0) {
              this.group = res.data.group;
            } else {
              this.$message.error(res.errmsg);
            }
          })
          .catch(() => {
            reject();
          });
      });
    },
    changeGroup(val) {
      if (val.indexOf("-1") != -1) {
        this.form.group_ids = ["-1"];
      }
    },
    // 获取信息
    get_panic_info() {
      this.loading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { id: this.id }
      );
      get_panic_info(data).then((res) => {
        if (res.errcode == 0) {
          let info = res.data.info;
          this.form.name = info.name;
          let time1 = this.parseTime(info.start_time, "{y}-{m}-{d}");
          let time2 = this.parseTime(info.end_time, "{y}-{m}-{d}");
          this.form.time = [time1, time2];
          this.form.is_impact = info.is_impact;
          this.form.is_limit = info.is_limit;
          let group_ids = info.group_ids.split(",");
          this.form.group_ids = group_ids.map(String);
          let list = [];
          info.panic_buy_list.map((e) => {
            let obj = {
              goods_name: `${e.goods.name}【${e.goods_spu.spu_unit.title}】`,
              unit: e.goods_spu ? e.goods_spu.spu_unit.title : "",
              purchase_price: e.goods_spu.purchase_price, //采购价
              market_price: e.market_price, //市场价
              price: e.price, //设置价格
              num_limit: info.is_limit == 1 ? e.num_limit : "不限购",
              inventory: e.inventory, //设置库存
              minimum: e.minimum, //起订量
            };
            list.push(obj);
          });
          this.loading = false;
          this.form.list = list;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.get_panic_base().then((res) => {
      this.get_panic_info();
    });
  },
};
</script>
<style lang='scss' scoped>
.validity {
  display: flex;
  align-items: center;
  flex-direction: row;
  &:first-child {
    margin-bottom: 18px;
  }
  /deep/ .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 0;
  }
  /deep/ .el-radio {
    margin-right: 10px;
    transform: translateY(1px);
  }
  span {
    font-size: 14px;
    color: #606266;
    display: inline-block;
    // padding-left: 15px;
    &.span1 {
      padding-left: 15px;
      padding-right: 10px;
    }
    &.span2 {
      padding-left: 10px;
    }
  }
}
.limit_number {
  margin: 0 10px;
}
.save_container {
  padding: 0 20px;
  margin-top: 15px;
  &.positive {
    position: fixed;
    bottom: 50px;
    left: 0;
    z-index: 9999;
  }
}
#newConBox {
  margin-top: 15px;
  padding-left: 20px;
}
.newConBox.on {
  margin-left: -10px;
  padding-left: 10px;
  bottom: 70px;
  border-top: 0;
  width: auto;
}
.goods_container_header {
  display: flex;
  align-items: flex-start;
  .btns {
    padding-left: 10px;
  }
}
.goods_container {
  height: 500px;
}
</style>
